<template>
	<el-card v-if="classify">
		<el-form inline class="ssssssaaaaa">
			<el-form-item class="mb-clear" label="所属类别：">
				<el-select size="small" v-model="selectValue" placeholder="请选择">
					<el-option v-for="(item, index) in classify" :key="item.searchId" :label="item.label" :value="index"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item class="mb-clear" label="题干搜索">
				<el-input size="small" v-model="searchValue"></el-input>
			</el-form-item>
			<el-form-item class="mb-clear">
				<el-button size="mini" type="primary" @click.prevent="clickExport">导出当前分组</el-button>
			</el-form-item>
			<el-form-item class="mb-clear">
				<el-tooltip class="item" effect="dark" content="仅可导出驾考宝典，禁止使用迅雷下载" placement="top">
					<el-button size="mini" type="primary" @click.prevent="clickExportZip">导出zip</el-button>
				</el-tooltip>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
	name: 'laFilter',
	props: ['classify'],
	setup (props, context) {
		const searchValue = ref('')
		const classifyIndex = ref(0)
		const checked = ref('all')
		const selectValue = ref(0)
		const classifyClickItem = index => {
			classifyIndex.value = index
			checked.value = 'all'
			context.emit('toggleClassify', index)
		}
		watch(selectValue, (newVal, oldVal) => {
			if (newVal !== oldVal) {
				classifyClickItem(newVal)
			}
		})
		watch(checked, (newVal, oldVal) => {
			if (newVal !== oldVal) {
				context.emit('isShowImgTopic', newVal)
			}
		})
		let timer = null
		const searchMehod = (callback, wait) => {
			if (timer) clearTimeout(timer)
			timer = setTimeout(callback, wait)
		}
		watch(searchValue, (newVal) => {
			searchMehod(() => {
				timer = null
				context.emit('search', newVal)
			}, 1000)
		})

		return {
			selectValue,
			checked,
			classifyIndex,
			searchValue,
			classifyClickItem,
			clickExport () { context.emit('export') },
			clickExportZip () { context.emit('exportZip') }
		}
	}
})
</script>

<style scoped lang="scss">
	.hover { color: #ff7875 !important; }
</style>
